<style scoped>
</style>
<!--  -->
<template>
  <div>
    <el-dialog :title="'编辑当前站点导航菜单-' + (currentSite && currentSite.language && currentSite.language.name)"
      :visible.sync="dialogFormVisible" :close-on-click-modal="false" :modal-append-to-body="false">
      <el-form :model="form" v-loading="loading">
        <el-form-item label="菜单显示级别" :label-width="formLabelWidth" style="margin-bottom: 0;">
          <el-select size="small" v-model="form.maxIndex" placeholder="请选择">
            <el-option :label="'一级'" :value="0"></el-option>
            <el-option :label="'二级'" :value="1"></el-option>
            <el-option :label="'三级'" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-divider content-position="left">一级菜单文字设置</el-divider>
        <el-form-item label="菜单文字颜色" :label-width="formLabelWidth" style="margin-bottom: 8px;">
          <el-color-picker v-model="form.topFontColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="选中文字颜色" :label-width="formLabelWidth" style="margin-bottom: 8px;">
          <el-color-picker v-model="form.topSelectionColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="字体" :label-width="formLabelWidth" style="margin-bottom: 0;">
          <el-select size="small" v-model="form.topFontFamily" placeholder="请选择">
            <el-option :label="'默认'" :value="null"></el-option>
            <el-option v-for="(item, index) in fontFamily" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="字号" :label-width="formLabelWidth" style="margin-bottom: 0;">
          <el-select size="small" v-model="form.topFontSize" placeholder="请选择">
            <el-option :label="'默认'" :value="null"></el-option>
            <el-option :label="'0.9em'" :value="'0.9em'"></el-option>
            <el-option :label="'1em'" :value="'1em'"></el-option>
            <el-option :label="'1.1em'" :value="'1.1em'"></el-option>
            <el-option :label="'1.2em'" :value="'1.2em'"></el-option>
            <el-option :label="'1.3em'" :value="'1.3em'"></el-option>
            <el-option :label="'1.4em'" :value="'1.4em'"></el-option>
            <el-option :label="'1.5em'" :value="'1.5em'"></el-option>
            <el-option :label="'1.6em'" :value="'1.6em'"></el-option>
            <el-option :label="'1.7em'" :value="'1.7em'"></el-option>
            <el-option :label="'1.8em'" :value="'1.8em'"></el-option>
            <el-option :label="'1.9em'" :value="'1.9em'"></el-option>
            <el-option :label="'12px'" :value="'12px'"></el-option>
            <el-option :label="'14px'" :value="'14px'"></el-option>
            <el-option :label="'16px'" :value="'16px'"></el-option>
            <el-option :label="'18px'" :value="'18px'"></el-option>
            <el-option :label="'20px'" :value="'20px'"></el-option>
            <el-option :label="'22px'" :value="'22px'"></el-option>
            <el-option :label="'24px'" :value="'24px'"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="加粗" :label-width="formLabelWidth" style="margin-bottom: 0;">
          <el-select size="small" v-model="form.topFontStyle" placeholder="请选择">
            <el-option :label="'默认'" :value="null"></el-option>
            <el-option :label="'不加粗'" :value="'normal'"></el-option>
            <el-option :label="'加粗'" :value="'bolder'"></el-option>
          </el-select>
        </el-form-item>
        <el-divider content-position="left">二级菜单文字设置</el-divider>
        <el-form-item label="文字不换行" :label-width="formLabelWidth" style="margin-bottom: 0;">
          <el-radio-group v-model="form.subFontWrap">
            <el-radio size="mini" :label="0">关闭</el-radio>
            <el-radio size="mini" :label="1">开启</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmitData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import * as WindowType from '@/config/windowtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import _ from 'lodash'

export default {
  created () {
    VueFunctions.method(WindowType.EDIT_NAVIGATION, (bjComponent) => {
      this.dialogFormVisible = true
      this.bjComponent = bjComponent
      if (JSON.stringify(this.bjComponent.render.data.config) === '{}') {
        this.form = {
          maxIndex: 2,
          topFontColor: null,
          topFontFamily: null,
          topFontSize: null,
          topFontStyle: null,
          topSelectionColor: null,
          subFontWrap: 0
        }
      } else {
        this.form = JSON.parse(JSON.stringify(this.bjComponent.render.data.config))
        if (typeof (this.bjComponent.render.data.config.subFontWrap) === 'undefined') {
          this.$set(this.form, 'subFontWrap', 0)
        }
      }
      this.loading = false
    })
  },
  computed: {
    ...mapGetters(['currentSite']),
    ...mapState([
      'design'
    ])
  },
  data () {
    return {
      dialogFormVisible: false,
      loading: true,
      formLabelWidth: '120px',
      fontFamily: [
        { value: '宋体,SimSun', label: '宋体' },
        { value: '微软雅黑,Microsoft YaHei', label: '微软雅黑' },
        { value: '楷体,楷体_GB2312,SimKai', label: '楷体' },
        { value: '黑体,SimHei', label: '黑体' },
        { value: '隶书,SimLi', label: '隶书' },
        { value: 'andale mono', label: 'Andale Mono' },
        { value: 'arial,helvetica,sans-serif', label: 'Arial' },
        { value: 'arial black,avant garde', label: 'Arial Black' },
        { value: 'comic sans ms', label: 'Comic Sans Ms' },
        { value: 'impact,chicago', label: 'Impact,chicago' },
        { value: 'times new roman', label: 'Times New Roman' }
      ],
      form: {
        maxIndex: 2,
        topFontColor: null,
        topFontFamily: null,
        topFontSize: null,
        topFontStyle: null,
        topSelectionColor: null,
        subFontWrap: 0
      },
      // 阿毅，用户保存弹窗传递过来的参数
      bjComponent: null
    }
  },
  methods: {
    show () {
      this.dialogFormVisible = true
      if (!this.loading) {
        this.loading = true
      }
      this.bjComponent = BackendjsFunctions.getNavigation()
      if (JSON.stringify(this.bjComponent.render.data.config) === '{}') {
        this.form = {
          maxIndex: 2,
          topFontColor: null,
          topFontFamily: null,
          topFontSize: null,
          topFontStyle: null,
          topSelectionColor: null,
          subFontWrap: 0
        }
      } else {
        this.form = JSON.parse(JSON.stringify(this.bjComponent.render.data.config))
        if (typeof (this.bjComponent.render.data.config.subFontWrap) === 'undefined') {
          this.$set(this.form, 'subFontWrap', 0)
        }
      }
      this.loading = false
      // this.$post('/site/get-site-menu-config').then(response => {
      //   if (response && typeof response.maxIndex === 'number') {
      //     this.form = response
      //   }
      //   this.loading = false
      // })
    },
    // 请求后台
    onSubmitData () {
      // this.loading = true
      // let param = JSON.parse(JSON.stringify(this.form))
      // this.$jpost('/baseinfo/update-site-menu-config', param).then(response => {
      //   if (response && typeof response.maxIndex === 'number') {
      //     this.form = response
      //     this.design.ref.contentWindow.vueFunc.setupMenuConfigRenderMenu(this.form)
      //     this.dialogFormVisible = false
      //   }
      //   this.loading = false
      // })
      this.bjComponent.render.data.config = JSON.parse(JSON.stringify(this.form))
      BackendjsFunctions.saveNavigation(_.cloneDeep(this.bjComponent))
      this.dialogFormVisible = false
    }
  }
}

</script>
